import React,{useRef,useEffect} from 'react';
import { Button, Select, Icon, Carousel } from 'antd';
import { VtxModal, VtxMap } from 'vtx-ui';
import styles from './Model.less';
import { NAME_SPACE } from './config';
import moment from 'moment';

const Index = (props) => {
  const closePic = () => {
    const {dispatch} = props
    dispatch({
      type: `${NAME_SPACE}/updateState`,
      payload: {
        picVisable: false
      }
    })
  }
  const {picVisable, imgList} = props

  // console.log(imgList)

  // const getPic = (imgList) => {
  //   const {dispatch} = props
  //   imgList.map((item, index) => {
  //     console.log(item)
  //     dispatch({
  //       type: `${NAME_SPACE}/showImage`,
  //       payload: {item}
  //     })
  //   })
  // }

  // const showImgList = getPic(imgList)
  // console.log(showImgList)

  const modalProps={
    footer: [
      <Button key="back" onClick={closePic}>返回</Button>,
    ],
    onCancel:closePic,
    maskClosable: true,
    title:'详情',
    visible: picVisable,
    width: 500,
  }

  const carousel = useRef(null);
  // useEffect(() => {
  //     let timer = setInterval(() => {
  //         if (carousel && carousel.current.slick) carousel.current.slick.slickNext();
  //     }, 1000);

  //     return () => {
  //         clearInterval(timer);
  //         timer = null;
  //     };
  // }, [true]);

  const prev = () => {
    carousel.current.slick.slickPrev()
  }
  const next = () => {
    carousel.current.slick.slickNext()
  }

  return (
    <VtxModal {...modalProps}>
      <div className={styles.carousel}>
        <Carousel dots={false} ref={carousel}>
          {
            Array.isArray(imgList)?
              imgList.map((item) => {
                return(
                  <div className={styles.item}>
                    <img src={`https://zjn.cloudhw.cn/zjn-web/zjn/common/filehandle/showImage?filepath=${item}`}/>
                  </div>
                )
              })
            :
              ''
          }
          {/* <img src='https://zjn.cloudhw.cn/zjn-web/zjn/common/filehandle/showImage?filepath=20200221//20200221193311.png'/>
          <img src='http://localhost:8000/zjn-web/zjn/common/filehandle/showImage?filepath=20200221%2F%2F20200221192219.jpg&tenantId=0ff83c7c50d340d6a95c576387715b9d&systemCode=&forIeNoCache=1582285137702'/> */}
          
          {/* <div className={styles.item}>123</div>
          <div>456</div>
          <div>789</div>
          <div>147</div> */}
        </Carousel>
        <div className={styles.icon}>
          <span className={styles.iconContent}>
            <span className={styles.left}><Icon type="left"  onClick={() => {prev()}}/></span>
            <span className={styles.right}><Icon type="right" onClick={() => {next()}}/></span>
          </span>
        </div>
      </div>
    </VtxModal>
  )
}

export default Index